<template>
  <div class="wrap">
    <div class="title">
      <img src="../../images/main/par.png" alt>
      <span class="back" @click="backParMan()">合伙人管理</span>
      <img class="right" src="../../images/main/right.png" alt>
      <span>收款账号</span>
    </div>
    <div class="clear"></div>

    <!-- 编辑 -->
    <!-- <div class="body" v-if="type == 'modify'">
      <div class="list firlist">
        <img class="red" src="../../images/main/red.png" alt>
        <span class="txt">姓名：</span>
        <div class="input">{{account.accountName}}</div>
      </div>
      <div class="list">
        <img class="red" src="../../images/main/red.png" alt>
        <span class="txt">银行名称：</span>
        <div class="input">{{account.bankName}}</div>
      </div>
      <div class="list">
        <img class="red" src="../../images/main/red.png" alt>
        <span class="txt">银行账号：</span>
        <div class="input">{{account.bankAccount}}</div>
      </div>

      <div class="submit" @click="reaccParMan()">修改资料</div>
    </div> -->

    <!-- 新增 -->
    <div class="addAccount">
      <div class="title" >{{!isEdit ? '新增账户' : '修改账户'}}</div>
      <el-form ref="form" :rules="ruleForm" :model="addAccount" label-width="120px">
        <el-form-item label="账户类型" prop="isEnterprise">
          <el-radio-group v-model="addAccount.isEnterprise" v-if="!isEdit" >
            <el-radio label="true">企业提现</el-radio>
            <el-radio label="false">个人提现</el-radio>
          </el-radio-group>
          <div style="padding-left:10px;" v-else>
              <span v-if="addAccount.isEnterprise === 'true'">企业提现</span>
              <span v-else>个人提现</span>
          </div>
        </el-form-item>

        <!-- 企业提现 -->
        <div v-if="addAccount.isEnterprise === 'true'">
          <el-form-item label="企业名称" prop="accountName">
            <el-input
              v-model="addAccount.accountName"
              maxlength="30"
              >
            </el-input>
          </el-form-item>
          <el-form-item label="开户行" prop="bankName">
            <el-input v-model="addAccount.bankName" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="税号" prop="dutyParagraph">
            <el-input v-model="addAccount.dutyParagraph" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="银行账号" prop="bankAccount">
            <el-input
              v-model="addAccount.bankAccount"
              maxlength="20"
              type="text"
              @input="bankAccountInp"
              >
            </el-input>
          </el-form-item>
        </div>

        <!-- 个人提现 -->
        <div v-else>
          <el-form-item label="姓名" prop="accountName">
            <el-input v-model="addAccount.accountName" maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="银行名称" prop="bankName">
            <el-input v-model="addAccount.bankName" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="银行账号" prop="bankAccount">
            <el-input
              v-model="addAccount.bankAccount"
              @input="bankAccountInp"
              maxlength="20"
              type="text"></el-input>
          </el-form-item>
        </div>

      </el-form>
      <div class="button">
        <el-button
          @click="addAccount_cancel"
          >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="addAccount_submit"
          >
          <span v-if="!isEdit">提交</span>
          <span v-else>修改</span>
        </el-button>

      </div>
    </div>

  </div>
</template>

<style type="text/scss" lang="scss" scoped>
  .wrap {
    .addAccount {
      padding-top: 100px;
      width: 500px;
      margin: 0 auto;
      >.title {
        text-align: center;
        margin-bottom: 40px;
      }
    }
    .button {
      text-align: center;
      margin-top: 30px;
    }
  }
</style>

<script>
import Global from '../tool/Global.vue'
import axios from 'axios'
import qs from 'qs'
export default {
  created () {
    this.getAccount();
  },
  data () {
    return {
      isEdit: false,
      account: {},
      type: 'add',
      addAccount: {
        accountName: '',
        bankName: '',
        bankAccount: '',
        dutyParagraph: '',
        isEnterprise: 'true',
        id: '',
        partnerId: this.$route.query.id
      },
      ruleForm: {
        accountName: [
          { required: true, message: '请输入账户名称或企业名称', trigger: 'blur' }
        ],
        bankName: [
          { required: true, message: '请输入银行名', trigger: 'blur' }
        ],
        bankAccount: [
          { required: true, message: '请输入银行账户', trigger: 'blur' }
        ],
        dutyParagraph: [
          { required: true, message: '请输入税号', trigger: 'blur' }
        ],
        isEnterprise: [
          { required: true, message: '请选择账户类型', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    // 'addAccount.isEnterprise'() {
    //   this.addAccount.accountName = '';
    //   this.addAccount.bankName = '';
    //   this.addAccount.bankAccount = '';
    //   this.addAccount.dutyParagraph = '';
    //   this.addAccount.id = '';
    // }
  },
  methods: {
    bankAccountInp() {
      let _this = this;
      setTimeout(()=>{
        _this.addAccount.bankAccount = isNaN ( _this.addAccount.bankAccount ) ? 0 : _this.addAccount.bankAccount.replace ( /\.|-/img, '' );
      }, 10);
    },
    // 取消
    addAccount_cancel() {
      this.$router.back ( -1 );
    },

    // 新增账户
    addAccount_submit() {
      console.log('开始提交')
      this.$refs.form.validate((valid) => {
        if (valid) {
          let obj = {};
          for ( let i in this.addAccount ) {
            obj[i] = this.addAccount[i];
          }
          if (this.addAccount.isEnterprise === 'false') {
            delete obj.dutyParagraph;
          }

          if ( this.type == 'add' ) {
            delete obj.id;
          }
          console.log('提交中')
          console.log(obj)
          // return
          for ( let i in obj ) {
            if ( !obj[i] ) {
              return;
            }
          }
          let _this = this;
          let url = this.type == 'add' ? `${this.$store.state.url}/tPartnerAccount/addAccount` : `${this.$store.state.url}/tPartnerAccount/updateAccount`;
          axios.post (
            url,
            qs.stringify ( obj )
          ).then ( response => {
            let res = response.data;
            if ( res.code == 0 ) {
              this.$store.state.fn.success( this.isEdit?'修改成功':'增加成功' ).then (() => {
                _this.$router.back(-1);
              });
            } else {
              this.$alert ( '增加失败' );
            }
          }, () => {
            this.$alert ( '增加失败' );
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    reaccParMan: function () {
      this.$router.push({
        path:'reaccParMan'
      })
    },
    backParMan: function () {
      this.$router.push({
        path:'/main'
      })
    },
    /**
     *  获取账户信息
     */
    getAccount: function () {
      let that = this;
        axios({
          method:'post',
          url:`${that.$store.state.url}/tPartnerAccount/selectDateils`,
          data:qs.stringify({
            partnerId: this.$route.query.id
          })
        }).then(res => {
          if ( res.data.code == 0 ) {
            this.type = 'modify';
            this.addAccount.accountName = res.data.data.accountName;
            this.addAccount.bankName = res.data.data.bankName;
            this.addAccount.bankAccount = res.data.data.bankAccount;
            this.addAccount.dutyParagraph = res.data.data.dutyParagraph;
            this.addAccount.isEnterprise = String(res.data.data.isEnterprise);
            this.addAccount.id = res.data.data.id;
            if(res.data.data.id){
              this.isEdit = true;
            }
          }
        });
    }
  },
  mounted () {
  }
};
</script>
<style scoped>
.wrap {
  /* padding: 68px 136px;
  width: 100%; */
  width: 90%;
  margin: 40px auto;
}
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
}
.title span {
  float: left;
}
.title img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}
.title .right {
  width: 11px;
  height: 18px;
  padding-top: 9px;
  margin-left: 5px;
  margin-right: 6px;
}
.body {
  background: #ffffff;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  /* width: 1490px; */
  /* height:710px;
  margin-top: 70px; */
  /* margin-left: 48px; */
  /* padding-left: 539px;
  padding-top: 91px; */
  box-sizing: border-box;
  padding:  30px;
  text-align: center;
}
.list {
  /* height: 25px; */
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  line-height:25px;
  padding: 15px 0;
  /* margin-top: 64px; */
}
.firlist {
  margin-top: 0;
}
.red {
  width: 10px;
  height: 10px;
}
.txt {
  width: 101px;
  display: inline-block;
  text-align: left;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  /* font-weight: bold; */
  color: #606266;
}
.input {

  margin-left: 90px;
  display: inline-block;
  font-family:PingFangSC-Medium;
  font-size:18px;
  color:#888888;
}

.submit {
  background: #085dab;
  width: 160px;
  height: 40px;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
  /* margin-top: 240px; */
  /* margin-left: 79px; */
  margin: 20px auto;
  cursor: pointer;
}
.back {
  cursor: pointer;
}
.addd-account-input{
  width: 90%;
}
.edit-account-input{
  margin-left:0;
}
</style>
<style lang="css">
  /* 补充样式 */
.account-type+.el-radio{
  margin-left:60px;
}
.account-type .el-radio__label{
  color: #333;
  font-size: 16px;
  font-weight: 700;
}
.account-type .el-radio__input.is-checked+.el-radio__label{
  color:#085dab;
}
.account-type .el-radio__input.is-checked .el-radio__inner{
  border-color: #085dab;
  background: #085dab;
}
.add-submit{
  width: 160px;
  height: 40px;
  background-color: #085dab;
  border-color: #085dab;
  border-radius: 0;
}
.add-submit:hover{
  background-color: #117ada;
  border-color: #117ada;
}
</style>
